<template>
  <div>
    关于我们
    <hr>
    <ul class="nav">

     <!-- <router-link to="/about" exact tag="li">
        <a>study</a>
      </router-link>


      <router-link to="/about/work" tag="li">
        <a>work</a>
      </router-link>

      <router-link to="/about/hobby" tag="li">
        <a>hobby</a>
      </router-link>-->


      <router-link :to="{name:'About'}" exact tag="li">
        <a>study</a>

      </router-link>


      <router-link :to="{name:'Work'}" exact tag="li">
        <a>work</a>
      </router-link>

      <router-link :to="{name:'Hobby'}" tag="li">
        <a>hobby</a>
      </router-link>

    </ul>
    <hr>
    <router-view></router-view>
    测试数据: {{test}}

  </div>


</template>

<script>
    export default {
      data(){
        return{
          test:'改变前'
        }

      },

      beforeCreate(){
        console.log("beforeCreate")


      },
      beforeRouteEnter(to,from,next){
        console.log("beforeRouteEnter")
        next((vm)=>{
          vm.test='改变了'
        });
      },
      beforeRouteUpdate(to,from,next){ //路由改变时触发
        console.log("beforeRouteUpadte")
        next();
      },
      beforeRouteLeave(to,from,next){
        next();
      }


    }
</script>

<style scoped>

</style>
